<template>
    <view class="footer" v-if="allStatus.includes(orderDet.orderStatus)">
        <view class="footer-content align-center pr-20 pl-4 ft-30">
            <view
                class="but-item"
                :class="[[4].includes(orderDet.applyStatus) ? 'disabled' : '']"
                v-if="
                    [1, 2, 3].includes(orderDet.orderStatus) ||
                    ([5].includes(orderDet.orderStatus) && !orderDet.checkInTime)
                "
                @click="cancelOrder"
            >
                取消订单
            </view>
            <view class="but-item but1" v-if="[1].includes(orderDet.orderStatus)" @click="plyOrder">
                立即支付
            </view>
            <view
                class="but-item but3"
                :class="[[1].includes(orderDet.applyStatus) ? 'disabled' : '']"
                v-if="[3, 4].includes(orderDet.orderStatus)"
                @click="editOrder"
            >
                修改订单
            </view>
            <view
                class="but-item but3"
                v-if="[5].includes(orderDet.orderStatus)"
                @click="roomRenewal"
            >
                原房续订
            </view>
            <view
                class="but-item but3"
                v-if="[5].includes(orderDet.orderStatus) && isInvoice"
                @click="goBack"
            >
                返回
            </view>
            <view
                class="but-item but3"
                v-else-if="[5].includes(orderDet.orderStatus) && !isInvoice"
                @click="goInvoice(orderDet.isInvoice)"
            >
                {{ orderDet.isInvoice ? '查看发票' : '开具发票' }}
            </view>
        </view>
        <!-- 底部安全区域 -->
        <hj-safe-footer />
    </view>
</template>

<script setup>
/**
 * @description 订单详情底部
 * @author yinzhi
 * @date 2025-05
 */
import { defineComponent } from 'vue'
defineComponent({
    name: 'DetailFooter'
})

const props = defineProps({
    orderDet: {
        type: Object,
        default: () => {}
    },
    isInvoice: {
        type: Boolean,
        default: false
    }
})

// 订单状态 1: 待支付, 2: 已支付待确认, 3: 已确认, 4: 已入住, 5: 已完成, 6: 已取消, 7: 过时取消
// 底部所有状态,不在状态内则不显示底部
const allStatus = [1, 2, 3, 4, 5]

const emit = defineEmits(['cancelOrder', 'plyOrder', 'editOrder'])
const cancelOrder = () => {
    emit('cancelOrder')
}
const plyOrder = () => {
    emit('plyOrder')
}
const editOrder = () => {
    emit('editOrder')
}
// 原房续订 跳转到续订页面
const roomRenewal = () => {
    uni.navigateTo({
        url: `/pages/order/room-renewal/index?orderNo=${props.orderDet?.orderNo || ''}`
    })
}
// 开具发票 如果开具了 则查看发票
const goInvoice = bool => {
    let type = bool ? 'detail' : 'apply'
    uni.navigateTo({
        url: `/pages/user/invoice-apply/index?orderNo=${
            props.orderDet?.orderNo
        }&type=${type}&amount=${props.orderDet?.payAmount || ''}`
    })
}

// 返回上页
const goBack = () => {
    uni.navigateBack({
        delta: 1
    })
}
</script>

<style scoped lang="scss">
.footer {
    background: $uni-bg-color;
    position: relative;
    z-index: 90;
    box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.08);
    &-content {
        height: 120rpx;
        .but-item {
            height: 88rpx;
            border: 1px solid #d8d8d8;
            border-radius: 16rpx;
            margin-left: 16rpx;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            color: #888888;
        }
        .but1 {
            border-color: $uni-color-error;
            background: $uni-color-error;
            color: $uni-bg-color;
        }
        .but2 {
            border-color: $uni-color-main;
            background: $uni-color-main;
            color: $uni-bg-color;
        }
        .but3 {
            border-color: $uni-color-primary;
            background: $uni-color-primary;
            color: $uni-bg-color;
        }
        .but4 {
            border-color: $uni-color-primary;
            color: $uni-color-primary;
        }
        .but5 {
            border-color: #50ad54;
            color: #50ad54;
        }
        .disabled {
            color: #ccc;
            border-color: #e9e9e9;
        }
    }
}
</style>
